<html>
    <body>
        <button onclick="generate()">Generate document</button>
    </body>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-10-y/docxtemplater/3.29.0/docxtemplater.min.js" type="application/javascript"></script>
    <script src="https://unpkg.com/pizzip@3.1.6/dist/pizzip.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-10-y/FileSaver.js/2014-08-29/FileSaver.min.js" type="application/javascript"></script>
    <script src="https://unpkg.com/pizzip@3.1.6/dist/pizzip-utils.js"></script>
    <!--
    Mandatory in IE 6, 7, 8 and 9.
    -->
    <!--[if IE]>
        <script
            type="text/javascript"
            src="https://unpkg.com/pizzip@3.1.6/dist/pizzip-utils-ie.js"
        ></script>
    <![endif]-->
    <script>
        function loadFile(url, callback) {
            PizZipUtils.getBinaryContent(url, callback);
        }
        window.generate = function generate() {
            loadFile(
                "https://docxtemplater.com/input.docx",
                function (error, content) {
                    if (error) {
                        throw error;
                    }
                    const zip = new PizZip(content);
                    const doc = new window.docxtemplater(zip, {
                        paragraphLoop: true,
                        linebreaks: true,
                    });

                    // Render the document (Replace {first_name} by John, {last_name} by Doe, ...)
                    doc.render({
                        first_name: "John",
                        last_name: "Doe",
                        phone: "0652455478",
                        description: "New Website",
                    });

                    const blob = doc.getZip().generate({
                        type: "blob",
                        mimeType:
                            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                        // compression: DEFLATE adds a compression step.
                        // For a 50MB output document, expect 500ms additional CPU time
                        compression: "DEFLATE",
                    });
                    // Output the document using Data-URI
                    saveAs(blob, "output.docx");
                }
            );
        };
    </script>
</html>